<template>
  <a-form :form="form">
    <a-row>
      <a-col :span="23">
        <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" :label="dataObj.name">
          <rx-textboxlist  ref="valueList" v-model="values">
            <a-icon  type="setting" @click="openDialog(dataObj.type)" />
          </rx-textboxlist>
        </a-form-item>
      </a-col>
    </a-row>
  </a-form>
</template>
<script>
  import InsPortalPermissionApi from '@/api/portal/core/insPortalPermission'
  import {BaseForm,RxDialog,Dialog} from "@lowcode/jpaas-common-lib";
  export default {
    name: 'permission-component',
    mixins:[BaseForm],
    components: {
      RxDialog,
      Dialog
    },
    props: {
      /**
      * {
       *     type:"",
       *     name:"",
       *     values:"",
       *     names:"",
       * }
      */
      dataObj: {
        type: Object,
        default: []
      }
    },
    data(){
      return{
        typeList:[],
        values:{},
        valueList:{
          values:[],
          names:[]
        },
      }
    },
    mounted(){
      if(this.dataObj.values){
        this.getValues();
      }
    },
    methods: {
      openDialog(btn){
        var method=" this.func_" + btn + "()";
        eval(method);
      },
      func_subGroup(){
        this.selectGroups();
      },
      func_group(){
        this.selectGroups();
      },
      selectGroups(){
        let initGroups=this.getInitGroupValues();
        var conf={curVm: this,data:{single:false,showDimId:true,initGroups}, widthHeight: ['900px','600px']};
        Dialog.openGroupDialog(conf,function(self,data){
            self.valueList.values=[]
            self.valueList.names=[]
          for(var i=0;i<data.length;i++){
            var obj =data[i];
            self.valueList.values.push(obj.groupId);
            self.valueList.names.push(obj.name);
          }
          self.sendChangeValue();
        })
      },
      func_user(){
        let initUsers=this.getInitUserValues();
        var conf ={ curVm: this,data:{single:false,initUsers}, widthHeight: ['1000px', '600px']};
        Dialog.openUserDialog(conf,function(self,users){
          self.valueList.values=[]
          self.valueList.names=[]
          for(var i=0;i<users.length;i++){
            var obj =users[i];
            self.valueList.values.push(obj.userId);
            self.valueList.names.push(obj.fullName);
          }
          self.sendChangeValue();
        });
      },
      getValues(){
        var values=this.dataObj.values.split(",");
        var names=this.dataObj.names.split(",");
        for(var i=0;i<values.length;i++){
          this.valueList.values.push(values[i]);
          this.valueList.names.push(names[i]);
        }
        this.sendChangeValue();
      },
      setValueList(){
          var values=this.dataObj.values.split(",");
          var names=this.dataObj.names.split(",");
          this.valueList.values=[]
          this.valueList.names=[]
          for(var i=0;i<values.length;i++){
              this.valueList.values.push(values[i]);
              this.valueList.names.push(names[i]);
          }
      },
      sendChangeValue(){
        var changeValues = {
          value:  this.valueList.values.join(","),
          text:  this.valueList.names.join(",")
        };
        this.values = changeValues;
        //this.$refs.valueList.setValues(changeValues, false);
      },
        /**
         * 获取回填用户数据
         * @returns {*[]}
         */
        getInitUserValues(){
            let initUsers=[];
            if(this.values && this.values.value && this.values.text){

                let values=this.values.value.split(",");
                let labels=this.values.text.split(",");
                for (let i = 0; i < values.length; i++) {
                    let obj = {};
                    obj["userId"]=values[i],
                    obj["fullName"]=labels[i],
                    initUsers.push(obj)
                }

            }
            return initUsers;
        },
        getInitGroupValues(){
            if(this.values && this.values.value && this.values.text){
                let initGroups=[];
                initGroups[0]={};
                initGroups[0].data=[];
                if (this.values.value && this.values.text){
                    let values=this.values.value.split(",");
                    let labels=this.values.text.split(",");
                    for (let i = 0; i < values.length; i++) {
                        let obj = {};
                        obj["key"]=values[i],
                        obj["groupId"]=values[i],
                        obj["name"]=labels[i],
                        initGroups[0].data.push(obj)
                    }
                }
                return initGroups;
            }
            return null;
        }
    },
    watch:{
      values:function (val) {
        this.dataObj.values=val.value;
        this.dataObj.names=val.text;
        this.setValueList()
        this.$emit("change",this.dataObj);
      }
    }
  }
</script>

<style scoped>
  .tabButton {
    vertical-align: middle;
    margin-left: 10px;
  }
</style>